﻿<%@ Page Title="" Language="C#" MasterPageFile="../Shared/Master.Master" Inherits="System.Web.Mvc.ViewPage<ProductViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <div class="product_images">
        <div class="cover">
            <a title="click zoom image" href="<%= string.Format("{0}/{1}/{2}",Model.ImageRoot,Model.ProductView.ProductId ,Model.ProductView.ImageName) %>">
                <img src="<%= string.Format("{0}/{1}/{2}",Model.ImageRoot,Model.ProductView.ProductId ,Model.ProductView.ImageName) %>"
                    alt="" /></a>
        </div>
        <div class="album" id="album">
            <% foreach (EProductImage item in Model.ImageList)
               {
                   
            %>
            <a>
                <img src="<%= string.Format("{0}/{1}/{2}",Model.ImageRoot,Model.ProductView.ProductId ,item.ImageName) %>"
                    alt="" title="<%= item.Title %>" />
            </a>
            <%
                }
            %>
        </div>
    </div>
    <div class="desc">
        <h3 class="title">
            <%=Model.ProductView.ProductName %><%=Model.ProductView.ProductNo %></h3>
        <div class="details">
            <div class="box">
                <div class="content">
                    <%= Model.Details.Detail %></div>
            </div>
            <div class="box">
                <div class="title">
                    Product Specification:</div>
                <div class="content">
                    <%= Model.Details.Description %>
                </div>
            </div>
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
    <%= HtmlMetaHelper.HtmlTitle(Model.ProductView.ProductName,Model.ProductView.KeyWords,Model.ProductView.Description) %>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cssLink" runat="server">
    <link href="<%=Url.Content("~/css/Common/jqzoom.min.css") %>" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="jsLink" runat="server">
    <script src="<%=Url.Content("~/Scripts/Common/jqzoom.pack.1.0.1.min.js") %>" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="cssContent" runat="server">
    <style type="text/css">
        .desc
        {
            border: solid #888888 1px;
            margin-left: 370px;
            overflow: hidden;
        }
        h3.title
        {
            background-color: #336699;
            margin: 1px;
            text-align: center;
            color: #fff;
            padding: 5px;
        }
        .details .box
        {
        }
        .details .box .title
        {
            border-top: solid #888888 1px;
            background-color: #f3f3f3;
            text-align: center;
            padding: 5px;
            font-weight: bold;
            font-size: 14px;
        }
        .details .box .content
        {
            padding: 5px;
            color: #333333;
            line-height: 1.5;
        }
        .details .box .content li
        {
            list-style-position: inside;
            list-style-type: square;
        }
        .product_images
        {
            border: solid 1px #888888;
            width: 350px;
            float: left;
            overflow: hidden;
        }
        .cover
        {
            cursor: pointer;
        }
        .cover img
        {
            width: 100%;
        }
        #album
        {
            padding: 10px 5px;
            background-color: #f0f0f0;
            border-top: solid 1px #888888;
            overflow: hidden;
        }
        #album a
        {
            cursor: pointer;
            border: 1px solid #ccc;
            padding: 1px;
            display: block;
            float: left;
            margin: 2px;
            background-color: White;
            width: 30.5%;
        }
        #album a:hover
        {
            border: 1px solid #43800d;
        }
        #album img
        {
            width: 100%;
        }
    </style>
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="jsContent" runat="server">
    <script type="text/javascript">
        $(function () {
            $("#album img").click(function () { $(".cover a").attr("href", this.src); $(".cover img").attr("src", this.src); });
        });
    </script>
</asp:Content>
